<template>
    <el-drawer
        v-model="isShow"
        title="执勤排班详情"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-descriptions :column="1" border>
            <el-descriptions-item label="值班负责人">
                <el-tag type="info">{{ detail.dutUserName }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="值班人员">
                <el-space :size="12">
                    <el-tag type="info" v-for="item in jwPoliceList" :key="item.jwSendpoliceId">{{
                            item.userName
                        }}
                    </el-tag>
                </el-space>
            </el-descriptions-item>
            <el-descriptions-item label="值班时间">
                <el-date-picker
                    v-model="scheduleTime"
                    type="datetimerange"
                    range-separator="~"
                    disabled
                />
            </el-descriptions-item>
            <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        </el-descriptions>
        <template #footer>
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import {getPoliceScheduleDetailApi} from "@/api/SetSchedule/SetSchedule.js";

const isShow = ref(false)
// 执勤排班 ID
const scheduleId = ref('')
// 详情内容
const detail = ref({})
// 执勤时间
const scheduleTime = ref([])
// 其他值班人员
const jwPoliceList = ref([])

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
        scheduleId.value = ''
        detail.value = {}
        jwPoliceList.value = []
        scheduleTime.value = []
    }
}

// 展示执勤排班详情内容
const showScheduleDetail = (id) => {
    changeShowStatus()
    scheduleId.value = id;
    getDetail()
}

defineExpose({showScheduleDetail})

// 获取详情
const getDetail = async () => {
    const res = await getPoliceScheduleDetailApi(scheduleId.value)
    detail.value = res.data
    scheduleTime.value = [
        res.data.startdate,
        res.data.enddate
    ]
    jwPoliceList.value = res.data.jwSendpoliceList.filter(item => item.userId !== res.data.dutuserId);
}
</script>

<style scoped lang="scss">

</style>